<template>
  <div class="post-detail">
    <!-- 返回按钮 -->
    <div class="back-nav">
      <div class="container">
        <el-button @click="goBack" size="large">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <!-- 主要内容区域 -->
        <div class="col-lg-8">
          <div class="post-content-wrapper">
            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
              <el-skeleton :rows="8" animated />
            </div>

            <!-- 文章内容 -->
            <div v-else-if="post.id" class="post-content">
              <!-- 文章头部 -->
              <div class="post-header">
                <h1 class="post-title">{{ post.title }}</h1>
                
            <div class="post-meta">
                  <div class="meta-left">
                    <div class="author-info">
                      <img :src="post.author?.avatar || defaultAvatar" :alt="post.author?.username" class="author-avatar" />
                      <div class="author-details">
                        <span class="author-name">{{ post.author?.username }}</span>
                        <span class="publish-date">{{ formatDate(post.createTime) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="meta-right">
                    <div class="post-stats">
                      <span><i class="bi bi-geo-alt"></i> {{ post.location }}</span>
                      <span><i class="bi bi-eye"></i> {{ formatNumber(post.viewCount) }}</span>
                      <span><i class="bi bi-heart"></i> {{ formatNumber(post.likeCount) }}</span>
                    </div>
                  </div>
                </div>

                <!-- 标签 -->
                <div class="post-tags" v-if="post.tags && post.tags.length">
                  <el-tag
                    v-for="tag in post.tags"
                    :key="tag"
                    effect="plain"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>

              <!-- 文章主图 -->
              <div class="post-image" v-if="post.images && post.images.length">
                <img :src="post.images[0]" :alt="post.title" />
              </div>

              <!-- 文章正文 -->
              <div class="post-body">
                <div class="content-text" v-html="post.content"></div>
                
                <!-- 图片集合 -->
                <div class="image-gallery" v-if="post.images && post.images.length > 1">
                  <h3>更多图片</h3>
                  <div class="gallery-grid">
                    <div
                      v-for="(image, index) in post.images.slice(1)"
                      :key="index"
                      class="gallery-item"
                      @click="openImageViewer(index + 1)"
                    >
                      <img :src="image" :alt="`图片 ${index + 2}`" />
                    </div>
                  </div>
                </div>
              </div>

              <!-- 文章操作 -->
              <div class="post-actions">
                <el-button 
                  :type="isLiked ? 'primary' : 'default'"
                  @click="toggleLike"
                  size="large"
                >
                  <el-icon><Heart /></el-icon>
                  {{ isLiked ? '已点赞' : '点赞' }} ({{ post.likeCount }})
                </el-button>
                <el-button 
                  :type="isCollected ? 'warning' : 'default'"
                  @click="toggleCollect"
                  size="large"
                >
                  <el-icon><Star /></el-icon>
                  {{ isCollected ? '已收藏' : '收藏' }}
                </el-button>
                <el-button @click="sharePost" size="large">
                  <el-icon><Share /></el-icon>
                  分享
                </el-button>
              </div>

              <!-- 评论区 -->
              <div class="comments-section">
                <div class="comments-header">
                  <h3>评论 ({{ comments.length }})</h3>
                  <el-button type="primary" @click="showCommentForm = !showCommentForm">
                    写评论
                  </el-button>
                </div>

                <!-- 评论表单 -->
                <div v-if="showCommentForm" class="comment-form">
                  <el-input
                    v-model="newComment"
                    type="textarea"
                    :rows="4"
                    placeholder="写下你的想法..."
                    maxlength="500"
                    show-word-limit
                  />
                  <div class="comment-actions">
                    <el-button @click="showCommentForm = false">取消</el-button>
                    <el-button type="primary" @click="submitComment" :loading="submittingComment">
                      发表评论
                    </el-button>
                  </div>
                </div>

                <!-- 评论列表 -->
                <div class="comments-list">
                  <div
                    v-for="comment in comments"
                    :key="comment.id"
                    class="comment-item"
                  >
                    <img :src="comment.author.avatar" :alt="comment.author.username" class="comment-avatar" />
                    <div class="comment-content">
                      <div class="comment-header">
                        <span class="comment-author">{{ comment.author.username }}</span>
                        <span class="comment-date">{{ formatDate(comment.createTime) }}</span>
                      </div>
                      <p class="comment-text">{{ comment.content }}</p>
                      <div class="comment-actions">
                        <el-button text size="small" @click="replyToComment(comment.id)">
                          回复
                        </el-button>
                        <el-button text size="small" @click="likeComment(comment.id)">
                          <el-icon><Heart /></el-icon>
                          {{ comment.likeCount || 0 }}
                        </el-button>
                      </div>
                    </div>
                  </div>

                  <!-- 空状态 -->
                  <div v-if="comments.length === 0" class="empty-comments">
                    <el-empty description="暂无评论，快来抢沙发吧！" />
                  </div>
                </div>
              </div>
            </div>

            <!-- 错误状态 -->
            <div v-else class="error-container">
              <el-result
                icon="error"
                title="文章不存在"
                sub-title="抱歉，您访问的文章可能已被删除或不存在"
              >
                <template #extra>
                  <el-button type="primary" @click="goBack">返回上页</el-button>
                </template>
              </el-result>
            </div>
          </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
          <div class="sidebar">
            <!-- 作者信息卡片 -->
            <div class="author-card" v-if="post.author">
              <div class="author-header">
                <img :src="post.author.avatar || defaultAvatar" :alt="post.author.username" class="author-avatar-large" />
                <div class="author-info">
                  <h4 class="author-name">{{ post.author.username }}</h4>
                  <p class="author-title">{{ post.author.title || '旅行者' }}</p>
                </div>
              </div>
              <div class="author-stats">
                <div class="stat-item">
                  <span class="stat-number">{{ post.author.postCount || 0 }}</span>
                  <span class="stat-label">游记</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ post.author.followerCount || 0 }}</span>
                  <span class="stat-label">粉丝</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ post.author.totalLikes || 0 }}</span>
                  <span class="stat-label">获赞</span>
                </div>
              </div>
              <div class="author-actions">
                <el-button type="primary" size="large" style="width: 100%">
                  <el-icon><Plus /></el-icon>
                  关注
                </el-button>
              </div>
            </div>

            <!-- 相关推荐 -->
            <div class="related-posts">
              <h4 class="sidebar-title">
                <i class="bi bi-bookmark"></i> 相关推荐
              </h4>
              <div class="related-list">
                <div
                  v-for="related in relatedPosts"
                  :key="related.id"
                  class="related-item"
                  @click="goToPost(related.id)"
                >
                  <img :src="related.cover" :alt="related.title" class="related-image" />
                  <div class="related-info">
                    <h5 class="related-title">{{ related.title }}</h5>
                    <div class="related-meta">
                      <span><i class="bi bi-eye"></i> {{ formatNumber(related.viewCount) }}</span>
                      <span><i class="bi bi-heart"></i> {{ formatNumber(related.likeCount) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 目录 -->
            <div class="toc-card" v-if="tableOfContents.length">
              <h4 class="sidebar-title">
                <i class="bi bi-list-ul"></i> 目录
              </h4>
              <div class="toc-list">
                <div
                  v-for="item in tableOfContents"
                  :key="item.id"
                  class="toc-item"
                  @click="scrollToHeading(item.id)"
                >
                  {{ item.text }}
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    </div>

    <!-- 图片查看器 -->
    <el-image-viewer
      v-if="showImageViewer"
      :url-list="post.images || []"
      :initial-index="currentImageIndex"
      @close="showImageViewer = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { defaultAvatar, images } from '@/assets/images'
import { 
  ElButton, ElIcon, ElSkeleton, ElTag, ElInput, ElEmpty, ElResult, ElImageViewer, ElMessage 
} from 'element-plus'
// import { 
//   ArrowLeft, Heart, Star, Share, Plus 
// } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const post = ref<any>({})
const comments = ref<any[]>([])
const relatedPosts = ref<any[]>([])
const tableOfContents = ref<any[]>([])

// 交互状态
const isLiked = ref(false)
const isCollected = ref(false)
const showCommentForm = ref(false)
const submittingComment = ref(false)
const newComment = ref('')

// 图片查看器
const showImageViewer = ref(false)
const currentImageIndex = ref(0)

// 返回上页
const goBack = () => {
  router.go(-1)
}

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '未知时间'
  
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }
}

// 点赞/取消点赞
const toggleLike = () => {
  isLiked.value = !isLiked.value
  if (isLiked.value) {
    post.value.likeCount++
    ElMessage.success('点赞成功！')
  } else {
    post.value.likeCount--
    ElMessage.info('已取消点赞')
  }
}

// 收藏/取消收藏
const toggleCollect = () => {
  isCollected.value = !isCollected.value
  if (isCollected.value) {
    ElMessage.success('收藏成功！')
  } else {
    ElMessage.info('已取消收藏')
  }
}

// 分享文章
const sharePost = () => {
  if (navigator.share) {
    navigator.share({
      title: post.value.title,
      text: post.value.content.substring(0, 100) + '...',
      url: window.location.href
    }).catch(() => {
      copyToClipboard()
    })
  } else {
    copyToClipboard()
  }
}

// 复制链接到剪贴板
const copyToClipboard = () => {
  navigator.clipboard.writeText(window.location.href).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制链接')
  })
}

// 提交评论
const submitComment = async () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }

  submittingComment.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const comment = {
      id: Date.now(),
      content: newComment.value,
      author: {
        username: '当前用户',
        avatar: defaultAvatar
      },
      createTime: new Date().toISOString(),
      likeCount: 0
    }
    
    comments.value.unshift(comment)
    newComment.value = ''
    showCommentForm.value = false
    ElMessage.success('评论发表成功！')
  } catch (error) {
    ElMessage.error('评论发表失败')
  } finally {
    submittingComment.value = false
  }
}

// 回复评论
const replyToComment = (commentId: number) => {
  ElMessage.info('回复功能开发中...')
}

// 点赞评论
const likeComment = (commentId: number) => {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.likeCount = (comment.likeCount || 0) + 1
    ElMessage.success('点赞成功！')
  }
}

// 打开图片查看器
const openImageViewer = (index: number) => {
  currentImageIndex.value = index
  showImageViewer.value = true
}

// 跳转到文章
const goToPost = (postId: number) => {
  router.push({ name: 'PostDetail', params: { id: postId } })
}

// 滚动到标题
const scrollToHeading = (headingId: string) => {
  const element = document.getElementById(headingId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 生成目录
const generateTableOfContents = () => {
  nextTick(() => {
    const headings = document.querySelectorAll('.content-text h1, .content-text h2, .content-text h3')
    tableOfContents.value = Array.from(headings).map((heading, index) => ({
      id: `heading-${index}`,
      text: heading.textContent,
      level: parseInt(heading.tagName.substring(1))
    }))
    
    // 为标题添加ID
    headings.forEach((heading, index) => {
      heading.id = `heading-${index}`
    })
  })
}

// 加载文章数据
const loadPostData = async () => {
  loading.value = true
  try {
    const postId = route.params.id
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 模拟数据
    post.value = {
      id: postId,
      title: '云南大理洱海深度游记 - 风花雪月的浪漫之旅',
      content: `
        <h2>前言</h2>
        <p>大理，一个让人魂牵梦绕的地方。风花雪月，诗和远方，这里有着让人沉醉的自然风光和深厚的文化底蕴。</p>
        
        <h2>行程安排</h2>
        <p>这次大理之行，我们安排了5天4夜的深度游，从古城到洱海，从苍山到喜洲，每一个地方都留下了美好的回忆。</p>
        
        <h3>第一天：大理古城</h3>
        <p>抵达大理后，首先来到了大理古城。青石板路，白族建筑，还有那熙熙攘攘的人群，一切都是那么的真实而美好。</p>
        
        <h3>第二天：洱海环游</h3>
        <p>租了一辆小电动车，沿着洱海环游。蓝天白云倒映在清澈的湖水中，远山如黛，近水含烟，美不胜收。</p>
        
        <h2>美食推荐</h2>
        <p>大理的美食也是不容错过的。白族三道茶、喜洲粑粑、鸡丝凉面，每一样都是舌尖上的享受。</p>
        
        <h2>总结</h2>
        <p>大理之行让我深深感受到了这座城市的魅力。这里不仅有美丽的自然风光，更有深厚的文化底蕴和淳朴的民风。</p>
      `,
      location: '云南大理',
      images: [
        images.img20221106190735,
        images.img90,
        images.img980,
        images.imgOIP
      ],
      tags: ['大理', '洱海', '古城', '自然风光', '文化'],
      author: {
        id: 1,
        username: '云游四海',
        avatar: defaultAvatar,
        title: '资深旅行者',
        postCount: 28,
        followerCount: 1567,
        totalLikes: 12450
      },
      viewCount: 8956,
      likeCount: 467,
      createTime: '2024-01-15T10:30:00Z'
    }
    
    // 模拟评论数据
    comments.value = [
      {
        id: 1,
        content: '写得真好！去年我也去过大理，洱海的风景确实让人难忘。特别是日出时分，整个湖面金光闪闪，美极了！',
        author: {
          username: '旅行小达人',
          avatar: defaultAvatar
        },
        createTime: '2024-01-16T14:20:00Z',
        likeCount: 12
      },
      {
        id: 2,
        content: '看了你的游记，我也想去大理了。请问住宿方面有什么推荐吗？',
        author: {
          username: '想去旅行的人',
          avatar: defaultAvatar
        },
        createTime: '2024-01-17T09:15:00Z',
        likeCount: 3
      }
    ]
    
    // 模拟相关推荐
    relatedPosts.value = [
      {
        id: 2,
        title: '丽江古城深度探索',
        cover: images.img90,
        viewCount: 5643,
        likeCount: 234
      },
      {
        id: 3,
        title: '香格里拉雪山之旅',
        cover: images.img980,
        viewCount: 7821,
        likeCount: 456
      },
      {
        id: 4,
        title: '昆明春城慢生活',
        cover: images.imgOIP,
        viewCount: 3456,
        likeCount: 167
      }
    ]
    
    // 生成目录
    generateTableOfContents()
    
  } catch (error) {
    console.error('加载文章失败:', error)
    post.value = {}
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadPostData()
})
</script>

<style scoped>
.post-detail {
  padding-top: 0;
  background: #f8f9fa;
  min-height: 100vh;
}

.back-nav {
  background: white;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 80px;
  z-index: 100;
}

.post-content-wrapper,
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loading-container,
.error-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-content {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.post-header {
  padding: 30px 30px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.post-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20px;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.publish-date {
  font-size: 14px;
  color: #666;
}

.post-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
}

.post-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-item {
  cursor: pointer;
  transition: all 0.3s;
}

.tag-item:hover {
  transform: translateY(-1px);
}

.post-image {
  padding: 0 30px;
  margin-bottom: 20px;
}

.post-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
}

.post-body {
  padding: 0 30px 30px;
}

.content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
}

.content-text h1,
.content-text h2,
.content-text h3 {
  margin: 30px 0 15px 0;
  color: #333;
  font-weight: 600;
}

.content-text h1 {
  font-size: 1.8rem;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.content-text h2 {
  font-size: 1.5rem;
  color: #667eea;
}

.content-text h3 {
  font-size: 1.3rem;
}

.content-text p {
  margin-bottom: 15px;
  text-align: justify;
}

.image-gallery {
  margin-top: 30px;
}

.image-gallery h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.gallery-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.post-actions {
  padding: 20px 30px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.comments-section {
  padding: 30px;
  border-top: 1px solid #f0f0f0;
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.comments-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.3rem;
}

.comment-form {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-author {
  font-weight: 600;
  color: #333;
}

.comment-date {
  font-size: 12px;
  color: #999;
}

.comment-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.empty-comments {
  text-align: center;
  padding: 40px 0;
}

/* 侧边栏样式 */
.author-card,
.related-posts,
.toc-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.author-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.author-avatar-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info h4 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 1.1rem;
}

.author-title {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.author-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 15px 0;
  background: #f8f9fa;
  border-radius: 10px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  color: #667eea;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-title i {
  color: #667eea;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.related-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.related-item:hover {
  background: #f8f9fa;
}

.related-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.related-info {
  flex: 1;
}

.related-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 0 5px 0;
  line-height: 1.3;
}

.related-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.related-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.toc-item:hover {
  background: #f8f9fa;
  color: #333;
  border-left-color: #667eea;
}

@media (max-width: 768px) {
  .post-detail {
    padding-top: 0;
  }
  
  .back-nav {
    top: 60px;
  }
  
  .post-header,
  .post-body,
  .post-actions,
  .comments-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .post-title {
    font-size: 1.8rem;
  }
  
  .post-meta {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .post-stats {
    justify-content: flex-start;
  }
  
  .post-actions {
    flex-direction: column;
  }
  
  .comments-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .comment-item {
    flex-direction: column;
    gap: 10px;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .sidebar {
    margin-top: 30px;
  }
  
  .author-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>

